<!--  -->
<template>
  <div class="feedback-wrap">
    <div class="left">
      <img src="@/common/image/icon/feedbacck-left-ico-index.png">
    </div>
    <div class="right">
      <h2 class="title">用户反馈调查</h2>
      <p class="subtitle">通过您的宝贵意见，我们将提供更好的产品和服务</p>
      <div class="con">
        <el-form
        label-position="top"
        class="formfeedback"
        :model="datasetForm"
        :rules="rulesForm"
        ref="datasetForm"
        @submit.native.prevent>
          <el-form-item label="你对BitaHub整体的满意度如何" prop="radiofeel">
            <el-radio-group v-model="datasetForm.radiofeel">
              <el-radio label="0">满意</el-radio>
              <el-radio label="1">一般</el-radio>
              <el-radio label="2">不满意</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="请详细描述您的问题或建议" prop="problemadvice">
            <el-input type="textarea" class="textareacon" v-model="datasetForm.problemadvice" resize='none' placeholder="建议从使用场景、训练方法、数据集等方面描述你的问题"></el-input>
          </el-form-item>
          <div class="upload-img">
            <h4 class="upload-title">上传图片</h4>
            <el-upload
              ref="picUploader"
              class="upload-box"
              :limit="3"
              action="/gateway/fileCenter/api/file/qiniu/upload"
              :headers="uploadHeader"
              :on-exceed="handleExceed"
              :on-remove="handleRemove"
              :on-change="handleChange"
              :before-upload="handleBeforeUpload"
              accept="image/*">
              <div class="upload-con">
                <div class="upload-img-title">
                  <img src="@/common/image/feedback-to-upload.png">
                </div>
                <p class="upload-img-text">上传</p>
                <p class="upload-img-subtitle-text">支持JPEG/JPG/PNG，不超过4M每次最多上传3张图片</p>
              </div>
            </el-upload>
          </div>
          <el-form-item label="联系方式" prop="num" class="phone-num">
            <el-input v-model="datasetForm.num" placeholder="请输入手机号，如有需要我们会尽快联系您"></el-input>
          </el-form-item>
          <el-form-item class="submit-generate">
            <el-button type="primary" @click="submitUpload('datasetForm')">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-dialog
      :visible.sync="dialogPrompt"
      width="600px"
      :show-close="false"
      :modal="false"
      class="dialog-prompt"
      :close-on-click-modal="false">
      <div class="dialog-prompt-box">
        <div class="dialog-left"><img src="@/common/image/feedback-grouping.png" alt=""></div>
        <div class="dialog-right">
          <h2 class="title">提交成功</h2>
          <p class="subtitle">您的意见已成功提交，我们会尽快和你联系。感谢您的反馈！</p>
          <div class="dialog-btn">
            <el-button type="primary" @click="gobackfun">返回</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import store from '@/store.js'
import { userSurveyadd } from '@/api/model'
export default {
  data () {
    const checknum = (rule, value, callback) => {
      // if (!value) {
      //   return callback(new Error('请输入电话号码'))
      // }
      var phone = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/
      setTimeout(() => {
        if (value && !phone.test(value)) {
          callback(new Error('您输入的联系方式不正确'))
        } else {
          callback()
        }
      })
    }
    return {
      dialogPrompt: false,
      datasetForm: {
        radiofeel: '0',
        problemadvice: '',
        num: ''
      },
      rulesForm: {
        radiofeel: [
          { required: true, message: '请选择满意程度', trigger: 'blur' }
        ],
        problemadvice: [
          { required: true, message: '请描述您的问题或建议', trigger: 'blur' },
          { max: 500, message: '问题或建议内容不能超过500个字符' }
        ],
        num: [
          { validator: checknum, trigger: 'blur' },
          { max: 11, message: '您输入的联系方式不正确' }
        ]
      },
      submitGeneratebtn: true
    }
  },

  components: {},

  computed: {
    // 图片上传header
    uploadHeader: () => {
      let obj = {
        token: store.state.userInfo.token,
        bitaToken: store.state.userInfo.bitaToken,
        userId: store.state.userInfo.userId
      }
      return obj
    }
  },

  mounted () {
    console.log('s')
  },

  methods: {
    // 限制上传数量弹框
    handleExceed (files, fileList) {
      this.$message.warning('最多只能上传3个文件')
    },
    // 上传文件list改变时
    handleChange (file, fileList) {
      console.log(fileList)
      if (fileList.length > 0) {
        console.log(fileList)
        this.submitGeneratebtn = false
      } else {
        this.submitGeneratebtn = true
      }
    },
    // 删除上传文件
    handleRemove (file, fileList) {
      if (fileList.length > 0) {
        this.submitGeneratebtn = false
      } else {
        this.submitGeneratebtn = true
      }
    },
    // 上传图片类型大小判断
    handleBeforeUpload (file) {
      const isImage = file.type.indexOf('image/') > -1
      const isLt4M = file.size / 1024 / 1024 < 4
      if (!isImage) {
        this.$message.error('请选择图片上传')
      }
      if (!isLt4M) {
        this.$message.error('上传图片大小不能超过 4MB!')
      }
      return isImage && isLt4M
    },
    submitUpload (agm) {
      this.$refs[agm].validateField('problemadvice', (validMessage) => {
        if (validMessage !== '') {
          return false
        } else {
          console.log('上传')
          this._uploadfeedbackImg()
        }
      })
    },
    _uploadfeedbackImg () {
      let uploadFiles = this.$refs.picUploader.uploadFiles
      let para = []
      if (uploadFiles.length > 0) {
        let arr = uploadFiles.map(item => {
          return item.response.data.id
        })
        para = arr
      }
      let data = {
        level: this.datasetForm.radiofeel,
        remark: this.datasetForm.problemadvice,
        telphone: this.datasetForm.num,
        fileIdList: para
      }
      console.log(para)
      userSurveyadd(data).then(res => {
        if (res.message.code === 0) {
          this.dialogPrompt = true
        }
      })
    },
    gobackfun () {
      this.$router.go(-1)
    }
  }
}

</script>
<style lang="stylus">
.feedback-wrap
  width 100%
  background #ffffff!important
  position relative
  margin 0  auto 0
  max-width 1162px
  padding-top 26px
  display flex
  align-items flex-start
  font-family 'PingFangSC-Medium'
  .left
    width 222px
    margin-right 33px
    img
      width 100%
      height auto
  .right
    width 546px
    padding-top 63px
    .title
      font-size 22px
      font-weight bold
      color #2D323B
      line-height 30px
      margin-bottom 17px
    .subtitle
      font-size 14px
      line-height 20px
      color #808080
      padding-bottom 29px
    .formfeedback
      .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before
        margin-right 18px
      .el-form-item__content
        padding-left 26px
      .phone-num
        padding-left 26px
        .el-form-item__content
          padding-left 0px
      .el-form-item__label
        font-size 16px
        line-height 22px
        color #2D323B
        font-weight bold
        padding-bottom 17px
        padding-top 42px
      .el-form-item
        margin-bottom 0
      .el-form-item__content
        font-size 14px
        line-height 14px
        color #2D323B
      .el-radio+.el-radio
        margin-left 46px
      .textareacon
        .el-textarea__inner
          height 80px
          line-height 18px
          font-size 13px
          padding 14px 10px
      .upload-img
        padding-left 26px
        .upload-title
          font-size 16px
          line-height 22px
          color #2D323B
          font-weight bold
          padding-top 42px
          padding-bottom 16px
        .upload-box
          width 240px
          height 160px
          background #F4F4F4
          position relative
          top 0
          left 0
          .el-upload-list
            position absolute
            top 0
            left 250px
            width 270px
          .upload-img-title
            margin 41px auto 5px
            height 30px
            width 30px
            box-sizing border-box
            img
              width 30px
              height 30px
          .upload-img-text
            font-size 14px
            line-height 20px
            color #7F7F7F
            padding-bottom 13px
            text-align center
          .upload-img-subtitle-text
            color #A7ACB5
            font-size 12px
            line-height 17px
            text-align center
            width 100%
            margin 0 auto 0
            padding 0 27px
      .submit-generate
        margin-top 42px
        .el-button
          padding 6px 67px 9px
          font-size 16px
          line-height 22px
.dialog-prompt
  .el-dialog__body
    padding 16px 66px 35px
.dialog-prompt-box
  display flex
  align-items flex-start
  .dialog-left
    width 86px
    height 86px
    margin-right 30px
    img
      width 100%
      height 100%
  .dialog-right
    flex 1
    padding-top 16px
    .title
      font-size 16px
      line-height 22px
      color #2D323B
      font-weight 600
      margin-bottom 8px
    .subtitle
      font-size 14px
      line-height 24px
      color #63666C
      padding-bottom 32px
    .dialog-btn
      text-align right
      .el-button
        padding 6px 21px 6px 21px
        font-size 14px
        line-height 20px
</style>
